<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/reset.css">
    <script type="text/javaScript" src="websocket.js"></script>
    <title>websocket通信</title>
    <style>
        *{margin: 0; padding: 0;}

        .connMsg{
            text-align: center;
        }
        .w{
            border: 1px black solid;
            min-width: 300px;
            max-width: 650px;
            width: 90%;
            margin: 5px auto;
        }

        .chatContent{
            width: 100%;
            height: 80vh;  
            border-bottom: 1px black solid;
        }
        .chatContent-ul{
            word-break:break-all;
           
        }
        .chatContent-ul li{
            margin-top: 1.5%;
            display:flex;
            justify-content: space-around;
        }
        .userName{
            /* outline: 1px red solid; */
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 10%; 
            
        }
        .content{
            /* outline: 1px red solid; */
            width: 85%;
        }
        

        .bottomregion{
            width: 100%;
        }

        #sendMessage{
            outline:medium; /* 隐藏输入时的轮廓线 */
            border: none; 
            padding: 0; /*清除内边距*/
            width: 90%;
            vertical-align:top;
            resize: none; /* 隐藏文本域右下角的小三角 */
        }
        #sendMessage::-webkit-scrollbar{display: none;} /* 隐藏谷歌滚动条 */
        #sendButton{
            margin-top: 0.5%;
            border: none;
        }
        .conn{
            min-width: 300px;
            width: 90%;
            margin: auto;
            max-width: 650px;
        }
    </style>
</head>
<body>
    <div class="connMsg" id="connMsg">&nbsp;</div>
    <div class="w">
        <div class="chatContent">
            <ul class="chatContent-ul"></ul>
        </div>
        <div class="bottomregion">
            <textarea style="width: 90%;" id="sendMessage" cols="30" rows="auto"></textarea>
            <input id="sendButton" type="button" value="发送"/>
        </div>
    </div>
    <div class="conn">
        姓名：<input type="text" value="" id="userId" placeholder="用户姓名">&nbsp;&nbsp;
        <input id='createConnectionButton' type="button" value="建立连接">
        &nbsp;&nbsp;
        <input id='closeConnectionButton' type="button" value="关闭连接">

    </div>

    
</body>
</html>